<template>
	<view class="content">
		<view class="hei20"></view>
		<view class="wid90 mar bacFFF borRad20" style="padding: 20rpx 0;">
			<view class="wid90 mar foSi30">
				<view style="height: 10rpx;"></view>
				<view class="dis disAl disJuB">
					<view class="fowe600">头像</view>
					<button hover-class="none" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image v-if="avatar" :src="url+avatar" class="borRad50" style="width: 98.1rpx;height: 98.1rpx;">
						</image>
						<image v-if="!avatar" :src="url+'/addon/qianyu_petrol/wxapp/image/header.png'" class="borRad50"
							style="width: 98.1rpx;height: 98.1rpx;"></image>
					</button>
				</view>
				<view class="xia"></view>
				<view class="dis disAl disJuB" style="height: 74rpx;">
					<view class="fowe600">昵称</view>
					<input type="nickname" style="text-align: right;" v-model="name" @change="namChange" placeholder="请输入昵称" />
				</view>
				<view class="xia"></view>
				<view class="dis disAl disJuB" style="height: 74rpx;">
					<view class="fowe600">绑定手机号</view>
					<view v-if="mobile" style="text-align: right;">{{mobile}}</view>
					<button v-if="!mobile" @getphonenumber="getWechatMobile" open-type="getPhoneNumber" style="text-align: right;"
						class="bacFFF hei100 dis disAl foSi30">点击授权</button>
				</view>
				<view class="xia"></view>
				<view class="dis disAl disJuB" style="height: 74rpx;">
					<view class="fowe600">性别</view>
					<radio-group class="dis disAl" @change="radioChange">
						<label class="dis disAl">
							<radio value="0" color="#2F54EB" :checked="gender == 0" style="transform:scale(0.7)" />男
						</label>
						<label class="dis disAl mar-left20">
							<radio value="1" color="#2F54EB" :checked="gender == 1" style="transform:scale(0.7)" />女
						</label>
					</radio-group>
				</view>
				<view class="xia"></view>
				<view class="dis disAl disJuB" style="height: 74rpx;">
					<view class="fowe600">生日</view>
					<picker mode="date" :value="date" @change="bindDateChange">
						<view :style="date?'':'color: #A0A0A0;'">{{date?date:'请选择生日'}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="dis disJuC foSi30 mar-top30" style="color: #7B7A7A;">
			<view @click="outlogin">退出登录</view>
		</view>
		<view class="wid100 dis disJuC poAbs" style="bottom: 50rpx;">
			<view class="dis disAl disJuC borRad10 foSi40 coFFF" @click="baocun()"
				style="width: 480rpx;height: 84rpx;background-color: #035DFF;">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				avatar: '',
				name: '',
				mobile: '',
				gender: 0,
				date: ''
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			namChange(res){
				this.name = res.detail.value
			},
			outlogin(){
				uni.showModal({
				    title: '温馨提示',
				    content: '确认要退出吗?',
				    success: function (res) {
				        if (res.confirm) {
							// 存用户信息
							uni.removeStorageSync('userinfo')
							uni.removeStorageSync('token')
							uni.removeStorageSync('yuan_userinfo')
							uni.navigateBack()
				        }
				    }
				});
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_user_info',
					method: "POST",
					header: {
						'site-id': that.global.site_id//自定义请求头信息
					},
					data: {
						openid: uni.getStorageSync('openid')
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.avatar = result.data.avatar
							that.name = result.data.nickname
							that.mobile = result.data.mobile
							that.gender = result.data.sex
							that.date = result.data.birthday
						}
					}
				})
			},
			baocun() {
				var that = this;
				if(!that.name){
					return uni.showToast({title: '请输入昵称',icon: 'none',duration: 1000});
				}else if(!that.date){
					return uni.showToast({title: '请选择生日',icon: 'none',duration: 1000});
				}
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_upd_user',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						'avatar': that.avatar,
						'nickname': that.name,
						'mobile': that.mobile,
						'sex': that.gender,
						'birthday': that.date
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							uni.navigateBack()
						}
					}
				})
			},
			getWechatMobile(e) {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_getphone',
					method: 'GET',
					header: {
						'site-id': that.global.site_id,
					},
					data: {
						'code': e.detail.code
					},
					complete: function() {
						uni.hideLoading();
					},
					success: function(result) {
						var apiResult = result.data;
						if (apiResult.code == 1) {
							that.mobile = apiResult.data
						}
					}
				});
			},
			//选择头像
			onChooseavatar(e) {
				var that = this
				console.log(e.detail);
				that.shangchuan(e.detail.avatarUrl)
			},
			shangchuan(tempFilePaths) {
				var that = this
				uni.uploadFile({
					url: that.global.url + '/api/qianyu_petrol/gasstation_common_image',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token'),
					}, //请求token	
					filePath: tempFilePaths,
					name: 'file',
					success: (res) => {
						var apiresult = JSON.parse(res.data)
						if (apiresult.code == 1) {
							console.log(apiresult.data.url);
							that.avatar = apiresult.data.url;
						} else {
							uni.showToast({
								title: apiresult.msg,
								icon: 'error',
								duration: 2000
							})
						}
					},
					fail() {
						uni.showToast({
							title: "网络连接失败",
							icon: 'error',
							duration: 2000
						})
					}
				});
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			radioChange(e) {
				this.gender = e.detail.value
			}
		}
	}
</script>

<style>
	.content {
		background: #F6F9FE;
		height: 100vh;
	}

	.xia {
		border: 1rpx dashed #E1DFDF;
	}
	button{padding: 0;margin: 0;background-color: #fff;height: 120rpx;}
	button::after{ border: none; }
	.button-hover {
		color:rgba(0, 0, 0, 0.6);
		background-color:#fff;
	}
</style>